<template>
  <div class="m">
    <video
      autoplay
      controls
      width="561px"
      height="360px"
      muted
      style="position: absolute; right: 354px; top: 59px"
    ></video>
    <video
      autoplay
      controls
      width="561px"
      height="360px"
      muted
      style="position: absolute; left: 392px; top: 59px"
    ></video
    ><video
      autoplay
      controls
      width="561px"
      height="360px"
      muted
      style="position: absolute; left: 392px; bottom: 212px"
    ></video>
  </div>
</template>

<script>
import flvjs from "flv.js/dist/flv.min.js";

export default {
  data() {
    return {
      videos: [],
      value: true,
      srcyc: [
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-2",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-3",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-4",
      ],
      src: [
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-2",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-3",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-4",
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createVideo();
      this.timer = setInterval(() => {
        this.videos.some((video, idx) => {
          if (!video.buffered.length) {
            return;
          }
          console.log(video.buffered.end(0));
          let end = video.buffered.end(0);
          let diff = end - video.currentTime;
          if (diff >= 1.5) {
            video.currentTime = end;
          }
        });
      }, 3000);
    });
  },
  methods: {
    Swichange() {
      this.autoplay = this.value;
    },
    createVideo() {
      if (flvjs.isSupported()) {
        var videos = document.getElementsByTagName("video");

        var videoarr = [].slice.call(videos);
        console.log(videoarr);

        videoarr.some((element, idx) => {
          this.videos.push(element);
          var flvPlayer = flvjs.createPlayer(
            {
              type: "flv",
              url: this.src[idx],
            },
            {
              enableWorker: true,
              enableStashBuffer: false,
              stashInitialSize: 128,
            }
          );
          flvPlayer.attachMediaElement(element);
          flvPlayer.load();
          flvPlayer.play();

          console.log(idx);
          console.log(this.src.length);

          if (idx + 1 >= this.src.length) return true;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.m {
  display: flex;
  width: 1880px;
  height: 1002px;
  background-image: url("../assets/zhyq/5G/5G安防.png");
  position: relative;
  top: 20px;
}
.comp {
  margin: 20px 0;
  border: 1px solid #3c6fd2;
}
/deep/.el-button + .el-button {
  margin-left: 0px;
}
/deep/ .map-button {
  padding: 0px 20px;
}
video {
  background-color: #3c476b;
}
</style>
